<template>
	<view class="contents">
		<view class="swiper">
			<view class="uni-margin-wrap">
				<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
					:interval="interval" :duration="duration" @change="curchange">
					<swiper-item v-for="(i,inx) in bannerList" :key="i.id">
						<view  class="swiper-item uni-bg-red">
							<image :src="i.image" mode=""></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="buy_message">
				赵**刚购买了一单
			</view>
			<view class="swiper_num">
				图片{{cur}}/3
			</view>
		</view>
		
		<view class="info">
			<view class="left">
				<view class="jifen">
					2460积分
				</view>
				<view class="market_price">
					市场价:2760元
				</view>
				<view class="isfree_delivery">
					免运费
				</view>
			</view>
			<view class="right">
				已兑换25件
			</view>

		</view>
		<view class="pro_title">

		</view>
		<view class="pro_details">

		</view>
		<view class="bottom_function">

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cur:1,//当前轮播图序号
				autoplay: true, //自动轮播
				interval: 3000, // 轮播速度
				duration: 2000, //轮播动画速度
				bannerList: [{
						image: 'http://one-huoke.oss-cn-hangzhou.aliyuncs.com/4e352202209221351585647.png'
					},
					{
						image: 'http://one-huoke.oss-cn-hangzhou.aliyuncs.com/4e352202209221351585647.png'
					},
					{
						image: 'http://one-huoke.oss-cn-hangzhou.aliyuncs.com/4e352202209221351585647.png'
					}
				]
			}
		},
		methods: {
               curchange(e) {
				   this.cur = e.detail.current+1
			   }
		}
	}
</script>

<style lang="scss">
	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
	}
	.swiper {
		height: 690rpx;
		position: relative;
	}
	.swiper-item {
		display: block;
		height: 690rpx;
		line-height: 690rpx;
		text-align: right;
		position: relative;
	}
	
	.swiper-item>image {
		width: 100%;
		height: 100%;
		display: block;
	}
	.contents {
		.buy_message {
			background-color: rgba(10, 10, 10, .4);
			color: #fff;
			text-align: center;
			height: 68rpx;
			line-height: 68rpx;
			width: 390rpx;
			border-radius: 50rpx;
			margin-left: 28rpx;
			position: absolute;
			top: 28rpx;
		}
		.swiper_num {
					background-color: rgba(26, 179, 116, 0.3);
					color: #fff;
					text-align: center;
					height: 60rpx;
					line-height: 60rpx;
					width: 180rpx;
					border-radius: 50rpx;
					position: fixed;
					top: 600rpx;
					right: 50%;
					transform: translateX(50%);
				}
		
	}
	

</style>
